<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>悠然画境</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <!-- 页面主体开始 -->
  <div class="container">
    <!-- 左侧面板开始 -->
    <div class="left-panel">
      <!-- 页面标题 -->
      <h2>AI绘画工具</h2>
      <!-- 数量标签 -->
      <p>数量：</p>
      <!-- 滑块输入框，用于选择数量 -->
      <div class="diyRange">
        <input type="range" max="4" min="1" step="1" value="0" id="range" class="slider" />
        <span class="slider-dot"></span>
        <span class="slider-dot"></span>
        <span class="slider-dot"></span>
        <span class="slider-dot"></span>
      </div>
      <!-- 选择绘画文本标签 -->
      <p>选择绘画文本：</p>
      <!-- 多行文本输入框，用于输入绘画文本 -->
      <textarea rows="4" cols="30" placeholder="在这里输入绘画文本..."></textarea>
      <!-- 错误信息提示，文本不能为空 -->
      <p class="error-message">文本不能为空</p>
      <!-- 生成绘画按钮 -->
      <button class="generate-button">生成绘画</button>
      <!-- 生成数量显示 -->
      <p>生成数量：<span id="imageCount">0</span></p>
    </div>
    <!-- 左侧面板结束 -->

    <!-- 右侧面板开始 -->
    <div class="right-panel">
      <!-- 图片将会在这里根据用户点击生成 -->
    </div>
    <!-- 右侧面板结束 -->
  </div>
  <!-- 页面主体结束 -->
<script src="./js/index.js"></script>
  
</body>

</html>